<template>
  <div class="dialog-container">
    <el-dialog
      v-dialogDrag
      title="资源信息"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="70%"
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="app-container" style="padding: 10px 0px 0px 0px;">
        <div class="search-container">
          <el-form ref="conditionForm" :model="searchForm" label-position="top">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="名称">
                  <el-input v-model="searchForm.name" size="mini" placeholder="名称" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="描述">
                  <el-input ref="code" v-model="searchForm.description" size="mini" placeholder="描述" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table-container">
          <el-row style="margin-bottom: 10px;">
            <el-button icon="el-icon-search" type="primary" size="mini" @click="onSearch">查询</el-button>
            <el-button icon="el-icon-close" type="danger" size="mini" @click="onClear">清空</el-button>
          </el-row>
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            :height="400"
            :stripe="true"
            row-key="_uuid"
            :tree-props="{children: 'children', hasChildren: '_hasChildren'}"
            lazy
            :load="loadData"
          >
            <el-table-column type="index" width="50" label="序号" align="center" />
            <el-table-column label="名称" prop="name" width="200" show-overflow-tooltip />
            <el-table-column label="描述" prop="description" show-overflow-tooltip />
            <el-table-column label="方法" prop="method" width="70" />
            <el-table-column label="路径" prop="url" width="200" show-overflow-tooltip />
            <el-table-column label="顺序" prop="sort" width="60" />
            <el-table-column label="备注" prop="remark" width="100" />
            <el-table-column fixed="right" label="操作" width="210">
              <template slot-scope="scope">
                <el-button v-if="scope.row.method" size="mini" @click.stop="edit(scope.row)">字段设置</el-button>
                <el-button v-if="scope.row.method" size="mini" @click.stop="dataScopeEdit(scope.row)">数据权限</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="pageVo.currentPage"
            :page-sizes="[30, 50, 100, 500]"
            :page-size="pageVo.pageSize"
            :total="pageVo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
      </div>
      <ResourceField ref="ResourceField" :row-data="detailRowData" />
      <ResourceDataScope ref="ResourceDataScope" :row-data="detailRowData" />
    </el-dialog>
  </div>
</template>
<script>
import ResourceField from './resourceField.vue'
import ResourceDataScope from './resourceDataScope.vue'
export default {
  components: {
    ResourceField,
    ResourceDataScope
  },
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // ----------------------弹框部分-------------------------
      pageLoading: false,
      dialogFormVisible: false,
      searchForm: {
        name: '',
        description: ''
      },
      listLoading: false,
      multipleSelection: [],
      calcTableHeight: '500px',
      pageVo: {
        total: 0,
        status: true,
        pageSize: 30,
        currentPage: 1
      },
      list: [],
      detailRowData: {}
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    onOpen() {
      this.pageLoading = true
    },
    onOpened() {
      this.getData()
      this.pageLoading = false
    },
    onClose() {},
    onClosed() {
      this.$parent.rowData = {}
      this.list = []
      this.searchForm.url = ''
      this.searchForm.description = ''
    },
    // 查询按钮
    onSearch() {
      this.handleCurrentChange(1)
    },
    // 清空按钮
    onClear() {
      this.searchForm.name = ''
      this.searchForm.description = ''
    },
    edit(row) {
      this.detailRowData = row
      this.$refs.ResourceField.dialogFormVisible = true
    },
    dataScopeEdit(row) {
      this.detailRowData = row
      this.$refs.ResourceDataScope.dialogFormVisible = true
    },
    // 获取数据
    getData() {
      this.listLoading = true
      const params = {
        ...this.searchForm,
        resourceApplicationId: this.rowData.id,
        pageNum: this.pageVo.currentPage,
        pageSize: this.pageVo.pageSize
      }
      this.$store.dispatch('system/resourceApi/page', params).then((data) => {
        var records = data.records
        if (records && records.length) {
          records.forEach((record) => {
            record._uuid = this.uuid()
            record._hasChildren = true
          })
        }
        this.list = records
        this.pageVo.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    uuid() {
      return (function () {
        // 获取唯一值
        return 'xxxxxxxx-xxxx-4xxx-yyyy-xxxxxxxxxxxx'.replace(
          /[xy]/g,
          function (c) {
            var r = (Math.random() * 16) | 0
            var v = c === 'x' ? r : (r & 0x3) | 0x8
            return v.toString(16)
          }
        )
      })()
    },
    loadData(tree, treeNode, resolve) {
      const params = {
        resourceApplicationId: tree.resourceApplicationId,
        resourceApiId: tree.id
      }
      this.$store.dispatch('system/resourceDetail/list', params).then((data) => {
        var list = data || []
        if (list && list.length) {
          list.forEach((row) => {
            row._uuid = this.uuid()
            row._hasChildren = false
          })
        }
        resolve(list)
      })
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return this.$Utils.formatDate(new Date(date))
    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageVo.currentPage = val
      this.getData()
    },
    // 页数改变事件
    handleSizeChange(val) {
      this.pageVo.pageSize = val
      this.pageVo.currentPage = 1
      this.getData()
    },
    // 多选框触发事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
